<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">

    <script src="/static/layui/layui.js"></script>
    <script src="/static/js/jquery.min.js"></script>
</head>
<body style="height: 100%">

<form class="layui-form" action="" autocomplete="new-password" style="margin-top: 10px">

    <input type="hidden"  name="videoId" value="${data['videos'].videoId}" />

    <div class="layui-form-item" >
        <label class="layui-form-label">课程名称:</label>
        <div class="layui-input-block" style="padding-left: 10px;padding-right: 10px">
           <input type="text" readonly class="layui-input" value="${data['videos'].videoName}">
        </div>
    </div>
    <div class="layui-form-item" >
        <label class="layui-form-label">视频名称</label>
        <div class="layui-input-block" style="padding-left: 10px;padding-right: 10px">
            <select name="videoItemId" id="videoItemId" lay-filter="videoItemId">
                <option value="">请选择试看视频</option>
                <c:forEach items="${data['videosItemList']}" var="t">
                    <option value="${t.videoItemId}">${t.videoItemName}</option>
                </c:forEach>
            </select>
        </div>
    </div>

<%--    <div class="layui-form-item" >--%>
<%--        <label class="layui-form-label">视频名称</label>--%>
<%--        <div class="layui-input-block" style="padding-left: 10px;padding-right: 10px">--%>
<%--            <select name="stIdTwo" id="stIdTwo" lay-filter="stIdTwo">--%>
<%--            </select>--%>
<%--        </div>--%>
<%--    </div>--%>

<%--    <div class="layui-form-item" >--%>
<%--        <label class="layui-form-label">三级分类名称</label>--%>
<%--        <div class="layui-input-block" style="padding-left: 10px;padding-right: 10px">--%>
<%--            <select name="stIdThree" id="stIdThree" lay-filter="stIdThree">--%>
<%--            </select>--%>
<%--        </div>--%>
<%--    </div>--%>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button id="btn" class="layui-btn" lay-submit lay-filter="commit">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>
    layui.use(['upload','jquery','form','util'], function(){
        var $ = layui.jquery
            ,upload = layui.upload
            ,form = layui.form;



        //监听提交
        form.on('submit(commit)', function(data){

            $.ajax({
                url : '/manage/videos/addTryVideoItemsToVideoId',
                type : 'post',
                dataType : 'json',
                data : data.field,
                success : function (data) {
                    if (data.code==200){
                        layer.msg(data.msg,{icon: 1, time: 500},function () {
                            layer.close();
                            window.parent.location.reload();
                        });
                    }else{
                        layer.msg(data.msg,{icon: 2, time: 1500});
                    }
                }
            })
            return false;
        });

        //监控select
        form.on('select(stIdOne)',function (data) {
            var stFId = data.value;
            $.ajax({
                url: '/manage/type/findTypeByStFid',
                type: 'post',
                dataType: 'json',
                data: {stFId: stFId},
                success: function (data) {
                    var array = data.data;
                    var stIdTwo = $("#stIdTwo");
                    var stIdThree = $("#stIdThree");
                    stIdTwo.html("");
                    stIdThree.html("");
                    var str ='';
                    str += "<option value=''>" + '请选择试看视频' +"</option>";
                    for (var i = 0; i < array.length; i++) {
                        str += "<option value='"+ array[i].stId +"'>" + array[i].stName +"</option>";
                    }
                    stIdTwo.append(str);
                    form.render('select');
                }
            })
        })

        form.on('select(stIdTwo)',function (data) {
            var stFId = data.value;
            $.ajax({
                url: '/manage/type/findTypeByStFid',
                type: 'post',
                dataType: 'json',
                data: {stFId: stFId},
                success: function (data) {
                    var array = data.data;
                    var stIdThree = $("#stIdThree");
                    stIdThree.html("");
                    var str ='';
                    str += "<option value=''>" + '请选择三级分类' +"</option>";
                    for (var i = 0; i < array.length; i++) {
                        str += "<option value='"+ array[i].stId +"'>" + array[i].stName +"</option>";
                    }
                    stIdThree.append(str);
                    form.render('select');
                }
            })
        })

    });
</script>

</body>
</html>
